Banner PrestaShop

Documentación de PrestaShop Banner CC

Documentación completa para el módulo de gestión de banners para PrestaShop (cc_ps_banner) con amplias opciones de configuración y plantillas ya preparadas.

Índice

1. Introducción
2. Instalación
3. Activación de la licencia
4. Panel de gestión
5. Gestión de pancartas
6. Configuración de fondo
7. Configuración de vídeo
8. Preajustes de contenido
9. Configuración de la superposición
10. Ajustes de animación
11. Mostrar horario
12. Utilización del módulo en plantillas
13. Resolución de problemas
14. PREGUNTAS FRECUENTES

1. introducción

CC PrestaShop Banner es un módulo avanzado para la creación y gestión de banners en tiendas PrestaShop. El módulo ofrece una interfaz intuitiva que le permite crear atractivos banners utilizando plantillas ya preparadas, sin necesidad de conocimientos de HTML y CSS.

El módulo ofrece:

• Nueve contenidos de banner predefinidos
• Diferentes tipos de fondo: vídeo, foto o color
• Integración con YouTube, Vimeo y posibilidad de subir tus propios vídeos
• Superposición de colores o gráficos
• Efectos de animación de entrada
• Mostrar horario (de-a)
• Posibilidad de colocar el banner en diferentes zonas de la tienda
• Soporte para múltiples banners simultáneamente

2. instalación

Requisitos del sistema

• PrestaShop 1.7 o posterior
• PHP 7.0 o posterior
• Permiso para instalar módulos

Proceso de instalación

1. Descargue el archivo ZIP del módulo de la tienda oficial códigos.cocos
2. Inicie sesión en el panel de administración de PrestaShop
3. Vaya a: Módulos > Gestor de módulos > Añadir nuevo módulo
4. Haga clic en "Añadir módulo" y seleccione el archivo ZIP descargado.
5. Una vez finalizada la instalación, haga clic en "Configurar".

3. activación de la licencia

Antes de poder utilizar todas las funciones del módulo, es necesario activar la licencia:

1. Tras la instalación, proceda a la configuración del módulo
2. Seleccione la pestaña "Licencia
3. Introduzca la clave de licencia recibida tras la compra
4. Haga clic en "Activar licencia".
5. Tras la activación, aparecerá un mensaje de confirmación y se desbloquearán todas las funciones del módulo.

4 Panel de gestión

El panel de gestión del módulo consta de varias pestañas que permiten una configuración completa:

Pestañas principales:

• Gestión de pancartas - añadir, editar y eliminar banners
• Documentación - enlace a la documentación en línea
• Ayuda - enlace a la página de asistencia
• Plug-ins - extensiones adicionales para el módulo
• Licencia - gestión de licencias de módulos

Cuando vaya a la pestaña "Gestión de banners", verá una lista de todos los banners que ha creado, con la posibilidad de editarlos, eliminarlos y cambiar su estado de actividad.

5. gestión de banners

En la pestaña "Gestión de banners" puede crear, editar y eliminar banners:

Lista de pancartas

• ID del banner
• Nombre
• Gancho (lugar de exposición)
• Preconfiguración (plantilla de contenido)
• Tipo de fondo
• Tipo de vídeo
• Estado de la actividad
• Posición
• Fecha de creación
• Acciones disponibles (editar, borrar)

Añadir y editar banners

1. Haga clic en el botón "Añadir nuevo" o "Editar" situado junto a un banner existente
2. Rellene el formulario de datos del banner, que está dividido en secciones:
   • Datos básicos - nombre, estado de actividad
   • Mostrar - gancho, dimensiones, esquinas redondeadas, posición
   • Tipo de fondo - elección del tipo de fondo (vídeo, foto, color)
   • Configuración de vídeo - configuración del reproductor de vídeo
   • Contenido predefinido - selección de una plantilla ya hecha y su configuración
   • Superposición - configuración de la capa superpuesta
   • Animaciones - banner efectos de entrada
   • Mostrar horario - establecer la duración de la actividad de banner
3. Haga clic en "Guardar" para guardar los cambios

6. Configuración de fondo

El módulo ofrece tres tipos diferentes de fondo de banner:

Color

• Seleccione "Color" como tipo de fondo
• Utilice el selector de color para seleccionar el color de fondo deseado
• Puede introducir el valor del color en formato HEX (#RRGGBB) o RGBA

Foto

• Seleccione "Foto" como tipo de fondo
• Cargue la imagen utilizando el botón "Examinar
• Formatos admitidos: JPG, PNG, GIF (máximo 15 MB)
• Al editar, la carga de una nueva imagen sustituirá a la actual, dejando el campo en blanco se mantendrá la imagen existente

Vídeo

• Seleccione "Vídeo" como tipo de fondo
• Configure los ajustes de vídeo restantes en la sección "Configuración de vídeo" (descrita en el capítulo siguiente)

7. Configuración de vídeo

El módulo permite utilizar vídeo como fondo del banner. Hay varias fuentes de vídeo disponibles:

Tipos de vídeo

• Sin vídeo - se utiliza cuando se selecciona un tipo de fondo distinto de vídeo
• YouTube - incrustar un vídeo de YouTube
• Vimeo - incrustar un vídeo de Vimeo
• URL directa - enlace a un archivo de vídeo alojado en un servidor externo
• Archivo de vídeo (cargar) - cargar su propio archivo de vídeo

Ajustes de reproducción

• Reproducción automática - inicia la reproducción automáticamente al cargar la página
• Silenciado - vídeo reproducido sin sonido (recomendado para la reproducción automática)
• Bucle - repetición automática de vídeo al finalizar
• Mostrar controles - muestra botones de control personalizados (reproducción/pausa, silencio/sonido)

Sube tu propio vídeo

• Seleccione el tipo de vídeo "Archivo de vídeo (subir)"
• Cargue el archivo utilizando el botón "Examinar
• Formatos compatibles: MP4, WebM, AVI, MOV (máximo 50 MB)

8 preajustes de contenido

El módulo ofrece nueve preajustes (plantillas) de contenido listos para usar que pueden seleccionarse y personalizarse:

Preajustes disponibles

• Sin preselección (sólo vídeo) - muestra sólo el fondo sin ningún contenido adicional
• Preselección 1 (título central con botón) - título central grande, subtítulo y botón CTA
• Preajuste 2 (Texto alineado a la izquierda) - contenido alineado a la izquierda del banner
• Preconfiguración 3 (Disposición en tres columnas) - contenido dividido en tres columnas
• Preajuste 4 (Dividido en dos columnas) - contenido dividido en dos columnas
• Preajuste 5 (Pantalla completa con desenfoque) - efecto de pantalla completa con título central grande
• Preselección 6 (Cabecera con estadísticas) - cabecera en la parte superior y tres columnas de datos en la parte inferior
• Preselección 7 (Lista de funciones con CTA) - título y lista de funciones que termina con un botón CTA
• Preconfiguración 8 (Cabecera y dos columnas) - descargar el diseño de la aplicación
• Preconfiguración 9 (Cabecera y dos columnas centradas, ampliadas) - diseño de promoción de eventos

Elementos de contenido para la configuración

• Título principal - encabezado del banner
• Subtítulo - texto suplementario bajo el título principal
• Texto del botón - el contenido mostrado en el botón CTA
• Botón de enlace - URL de destino al pulsar el botón
• Color del texto del botón - color de fuente del botón
• Color de fondo del botón - color de fondo del botón
• Texto 1, 2, 3 - campos de texto adicionales utilizados en varios preajustes
• CSS personalizado - estilos CSS adicionales para el banner

9. configuración de la superposición

Una superposición es una capa que se muestra sobre el fondo de un banner y que puede ayudar a aumentar la legibilidad del texto o crear un efecto ahumado:

Tipos de superposición

• Sin superposición - ninguna capa adicional sobre el fondo
• Color - capa de color con transparencia ajustable
• Imagen - superposición gráfica (por ejemplo, degradado, patrón, textura)

Ajustes de superposición de colores

• Color de superposición - selector de color (admite los formatos HEX y RGBA)
• Transparencia - valor de 0,0 (totalmente transparente) a 1,0 (opaco)

Ajustes de superposición de imágenes

• Imagen superpuesta - carga de imágenes mediante el botón "Examinar
• Transparencia - ajuste de la intensidad de la superposición de imágenes

10. ajustes de animación

El módulo ofrece varios efectos de animación que se aplican cuando se carga el banner:

Animación de entrada

• Sin animación - el banner aparece inmediatamente
• Aspecto liso - el banner se hace visible gradualmente (efecto de fundido)
• Entrada por la izquierda - el banner entra por la parte izquierda de la pantalla
• Entrada por la derecha - el banner entra por la parte derecha de la pantalla
• Entrada desde abajo - el banner entra por la parte inferior de la pantalla
• Aumento - el banner aparece con un efecto de zoom desde el centro
• Recuperación - el banner aparece con un efecto rebote

Tiempo de animación

• Valor en milisegundos (de 100 a 10000)
• El valor por defecto es 1000ms (1 segundo)
• Menos tiempo = animación más rápida
• Más tiempo = animación más lenta y suave

11. visualizar horario

La función de programación permite encender y apagar automáticamente las pancartas a una hora determinada:

Ajustes de horario

• Activar horario - activación de la función de visualización temporizada
• Fecha de inicio - fecha y hora a partir de la cual se mostrará el banner
• Fecha de finalización - fecha y hora hasta la que se mostrará el banner

Ejemplos de utilización

• Banners promocionales de tiempo limitado (por ejemplo, Black Friday, rebajas de temporada)
• Información sobre los próximos actos
• Cambio de banners según la hora del día (diferentes banners por la mañana, diferentes por la tarde)
• Anuncios periódicos a los clientes

12. utilización del módulo en las plantillas

Los banners se muestran automáticamente en las ubicaciones especificadas por los enganches seleccionados. Los enganches disponibles incluyen:

Lugares principales

• mostrarInicio - contenido principal de la página de inicio
• displayTop - parte superior de la página (encima de la cabecera)
• mostrarNavegación1 - primera barra de navegación (encima del logotipo/tienda)
• mostrarNav2 - segunda barra de navegación (a menudo debajo del logotipo)
• displayNavFullWidth - navegación completa (por ejemplo, menú megadropdown)
• displayBanner - banner encima de la cabecera
• displayFooter - contenido principal del pie de página
• displayFooterBefore - sección antes del pie de página (por ejemplo, enlaces adicionales)
• displayFooterAfter - sección después del pie de página (por ejemplo, descargos de responsabilidad, guiones)
• mostrarColumnaIzquierda - columna izquierda de la página
• mostrarColumnaDerecha - columna derecha de la página
• displayWrapperTop - parte superior del contenedor de la página principal
• displayWrapperBottom - parte inferior del contenedor de la página principal
• displayContentWrapperTop - inicio del contenido principal
• displayContentWrapperBottom - parte inferior del contenido principal
• displayBeforeBodyClosingTag - inmediatamente antes de cerrar la etiqueta <body> (a menudo en los guiones)

Enlaces a páginas de productos

• displayProductAdditionalInfo - información adicional en la página del producto
• displayProductListReviews - reseñas de productos en la vista de lista (por ejemplo, estrellas)
• mostrarSeguridad - bloque con garantías/confianza
• displayAfterProductThumbs - elementos tras las miniaturas de las imágenes de los productos

Enganches para cestas y pedidos

• displayShoppingCart - contenido de la página de la cesta de la compra
• displayShoppingCartFooter - añadidos al pie de la cesta (por ejemplo, botones CTA)
• displayBeforeCarrier - sección antes de elegir el método de entrega
• displayAfterCarrier - sección después de seleccionar el método de entrega
• mostrarConfirmaciónPedido - confirmación del pedido

Conexión de cuentas de clientes

• mostrarCuentaCliente - contenidos para clientes (enlaces, módulos, etc.)
• displayMyAccountBlock - Bloque "Mi cuenta" (normalmente en la cabecera o en la columna lateral)

13 Solución de problemas

El banner no se muestra

1. Compruebe que el banner está activo (estado "Activo" en la lista de banners)
2. Asegurarse de que la licencia está activa
3. Comprobar que el gancho al que se ha asignado el banner está presente en la plantilla actual.
4. Si está activada una programación, asegúrese de que la fecha actual se encuentra dentro de su intervalo
5. Borrar la caché de PrestaShop y del navegador

El vídeo no se reproduce automáticamente

1. Asegúrate de que la opción "Reproducción automática" está activada
2. Compruebe que el vídeo está silenciado (los navegadores bloquean la reproducción automática de vídeos con sonido)
3. Compruebe que la URL del vídeo es correcta (para YouTube y Vimeo)
4. Compruebe que el archivo de vídeo se ha cargado correctamente (en el caso de su propio archivo)

Problemas de visualización en dispositivos móviles

1. Ajusta las dimensiones del banner para que sea responsive (por ejemplo, anchura: 100%)
2. Reducir el tamaño del vídeo o la foto cargados para mejorar el rendimiento
3. Ajusta la cantidad de texto: en pantallas pequeñas, demasiado texto puede resultar ilegible.

14. PREGUNTAS FRECUENTES

¿Puedo tener más de una pancarta en el mismo lugar (enganche)?
Sí, el módulo permite asignar varios banners al mismo enganche. Los banners se mostrarán según la posición establecida (de menor a mayor valor).

¿Puedo utilizar la misma pancarta en distintas zonas de la tienda?
Actualmente, sólo se puede asignar un banner a un narguile. Si quieres mostrar la misma pancarta en diferentes lugares, tienes que crear una copia de la pancarta y asignarla a una hooka diferente.

¿Qué tamaño pueden tener los archivos de vídeo?
El módulo permite cargar archivos de vídeo con un tamaño máximo de 50 MB. Sin embargo, para un rendimiento óptimo, recomendamos comprimir el vídeo al mínimo necesario y utilizar el formato MP4 con el códec H.264.

¿Son los banners responsivos?
Sí, los banners se adaptan a la anchura del contenedor en el que se muestran. Para garantizar la plena capacidad de respuesta, se recomienda ajustar la anchura a 100% y una altura adecuada (puede utilizar las unidades vh para pantallas dependientes de la altura). de la pantalla).

¿Puedo incrustar el formulario en un banner?
El módulo en la versión estándar no soporta formularios directamente. Si necesita incluir un formulario en un banner, puede utilizar código HTML personalizado en los campos de texto, pero la funcionalidad del formulario dependerá de la plantilla de su tienda.

¿Con qué frecuencia se actualiza el módulo?
El módulo se actualiza periódicamente para garantizar la compatibilidad con las últimas versiones de PrestaShop e introducir nuevas funciones. Los titulares de una licencia válida tienen acceso a todas las actualizaciones.

¿Puedo transferir la licencia a otra tienda?
La licencia se asigna a un dominio. Si cambias el dominio de tu tienda, ponte en contacto con el servicio de asistencia de COCOS para transferir la licencia.

¿Afecta el módulo al rendimiento de la tienda?
El módulo se ha optimizado para mejorar el rendimiento. Los archivos de vídeo o imagen de gran tamaño son los que más pueden afectar a la velocidad de carga. Recomendamos optimizar los archivos multimedia antes de utilizarlos en banners.